<template>
    <div class="homePageBanner">
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img v-lazy="image" />
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script scoped>
import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);

export default {
    data() {
        return {
            images: [
                'https://yanxuan.nosdn.127.net/static-union/1675319562c6f282.jpg?type=webp&imageView&quality=75&thumbnail=750x0',
                'https://yanxuan.nosdn.127.net/701dc46ef4b83a07c178c5643613569b.jpg?type=webp&imageView&quality=75&thumbnail=750x0',
                'https://yanxuan.nosdn.127.net/8812d77a51a6e018cfef835fb3c4465d.jpg?type=webp&imageView&quality=75&thumbnail=750x0',
                'https://yanxuan.nosdn.127.net/6631dc453f83a27885222810b7768ab8.jpg?type=webp&imageView&quality=75&thumbnail=750x0'
            ],
        };
    },
};
</script>

<style >
    .homePageBanner .van-swipe-item img{
        height:9.375rem;
        width:100%;
    }
    .homePageBanner .van-swipe__indicators .van-swipe__indicator{
        width:1.375rem;
        height:.1875rem;
        background:#fff;
        opacity:0.7;
        border-radius:0;
    }
</style>